import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Form,
  Input,
  Select,
  Button,
  Card,
  InputNumber,
  Row,
  Col,
  Divider,
  Modal,
} from 'antd';
import InputColor from 'react-input-color';
const Option = Select.Option;
const FormItem = Form.Item;
const colorStyle = {
  width: '100%',
  height: '30px',
  padding: '0',
  border: '1px solid #d9d9d9',
  borderRadius: '4px',
  overflow: 'hidden',
  marginTop: '2px',
}

@connect(({ screenForm, loading }) => ({
  screenForm,
  loading: loading.models.screenForm,
}))
@Form.create()
class screenForm extends PureComponent {
   state = {
    imgData: '',
  };

  componentDidMount() {
    const { dispatch } = this.props;
    this.queryList();

    dispatch({
      type: 'screenForm/fontFamily',
      payload: {
        dataDictTypeCode: 'fontFamily',
      },
    })

    dispatch({
      type: 'screenForm/fontSizeList',
      payload: {
        dataDictTypeCode: 'fontSize',
      },
    })
  }

  handleSubmit = fields => {
    const { dispatch, form } = this.props;
    fields.preventDefault();
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.submit(values)
      }
    });
  };

  //查询
  queryList() {
    const { dispatch } = this.props;
    dispatch({
      type: 'screenForm/queryList',
      payload: {
        waterType: '2',
      },
      callback: (res) => {
        if(res.result == "ok") {
          const values = res.data&&res.data.dataList.length&&res.data.dataList[0];
          const params = {
            waterType: 2,
            font: values.font,
            fontSize: values.fontSize,
            color: values.color,
            tilt: values.tilt,
            transparency: values.transparency,
            rowNums: values.rowNums,
            colNums: values.colNums,
            picWidth: values.picWidth,
            picHeight: values.picHeight,
            waterContent: values.waterContent,
          }
          this.previewFn(params);
        }
      },
    });
  }

// 提交
  submit(fields) {
    const {
      dispatch,
      screenForm: { data },
    } = this.props;
    const id  = data.dataList[0].id;
    const values = {
      font: fields.font,
      fontSize: fields.fontSize,
      color: fields.color.hex,
      tilt: fields.tilt,
      transparency: fields.transparency,
      rowNums: fields.rowNums,
      colNums: fields.colNums,
      picWidth: fields.picWidth,
      picHeight: fields.picHeight,
      waterContent: fields.waterContent,
      id,
    };
    dispatch({
      type: 'screenForm/submit',
      payload: values,
      callback: (res) => {
        if(res.result == "ok") {
          Modal.success({title: res.msg});
          this.queryList();
        }else {
          Modal.error({title: '操作失败',content: res.msg});
        }
      },
    });
  }

  // 水印预览
  preview() {
    const { dispatch, form} = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const params = {
          waterType: 2,
          // fileSuffix: values.fileSuffix,
          font: values.font,
          fontSize: values.fontSize,
          color: values.color.hex,
          tilt: values.tilt,
          transparency: values.transparency,
          rowNums: values.rowNums,
          colNums: values.colNums,
          picWidth: values.picWidth,
          picHeight: values.picHeight,
          waterContent: values.waterContent,
        }
        this.previewFn(params);
      }
    });
  }

  previewFn(params) {
    const { dispatch} = this.props;
    dispatch({
      type: 'screenForm/preview',
      payload: params,
      callback: (res) => {
        if(res.result == "ok") {
          this.setState({
            imgData: res.data,
          })
          this.imgHandelVisible(true);
        }else {
          Modal.error({title: '操作失败',content: res.msg});
        }
      }
    });
  }

  handleValidator = (rule, val, callback) => {
    const { form } = this.props;
    if (!val) {
        callback();
    }
    if (form.getFieldValue('waterContent').length > 2) {
        callback('最多选择两个水印内容');
    }
    callback();
  }

  render() {
    const {
      form: { getFieldDecorator},
      submitting,
      screenForm: { data,fontData,fontSizeData},
    } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    const formVals = data&&data.dataList&&data.dataList.length&&data.dataList[0];

    return (
      <Card bordered={false}>
        <Row gutter={16}>
          <Col md={11}>
            <h3>水印预览</h3>
            <Card bordered={false} style={{borderRight: '1px solid #e7e7e7'}}>
                <img style={{width: '100%'}} src={this.state.imgData} />
                <div style={{textAlign: 'center',marginTop: '10px'}}><a>预览效果图</a></div>
            </Card>
          </Col>
          <Col md={12}>
            <h3>水印设置</h3>
            <Card bordered={false}>
            <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
              <FormItem {...formItemLayout} label="字体：">
                {getFieldDecorator('font',{rules: [{ required: true,message:'请选择字体'}],initialValue: formVals&&formVals.font||''})(
                  <Select>
                    {
                      fontData && fontData.map((item,index) => {
                        return (<Option  key={index} value={item.value}>{item.name}</Option>)
                      })
                    }
                  </Select>)}
              </FormItem>

              <FormItem {...formItemLayout} label="字号：">
                {getFieldDecorator('fontSize',{rules: [{ required: true,message:'请选择字号'}],initialValue: formVals&&formVals.fontSize||''})(
                  <Select placeholder="请选择">
                    {
                      fontSizeData && fontSizeData.map((item,index) => {
                        return (<Option  key={index} value={item.value}>{item.name}</Option>)
                      })
                    }
                  </Select>)}
              </FormItem>
              <FormItem {...formItemLayout} label="颜色：">
                {getFieldDecorator('color',{rules: [{ required: true,message:'请选择颜色'}]})
                (<InputColor
                  style={colorStyle}
                  initialHexColor={formVals&&formVals.color||''}
                  placement="right"
                />)
                }
              </FormItem>

              <FormItem {...formItemLayout} label="倾斜度：">
                {getFieldDecorator('tilt',{rules: [{ required: true,message:'倾斜度不能为空'}],initialValue: formVals&&formVals.tilt||''})(
                  <InputNumber min={0} max={90} style={{ width: '100%' }} placeholder="0-90"/>)}
              </FormItem>

              <FormItem {...formItemLayout} label="透明度：">
                {getFieldDecorator('transparency',{rules: [{ required: true,message:'透明度不能为空'}],initialValue: formVals&&formVals.transparency||''})(
                  <InputNumber min={0.3} max={0.8} step={0.1} style={{ width: '100%' }} placeholder="0.3-0.8"/>)}
              </FormItem>

              <FormItem {...formItemLayout} label="行数：">
                {getFieldDecorator('rowNums',{rules: [{ required: true,message:'行数不能为空'}],initialValue: formVals&&formVals.rowNums || ''})(
                  <InputNumber min={1} max={10} style={{ width: '100%' }} placeholder="1-10" />)}
              </FormItem>

              <FormItem {...formItemLayout} label="列数：">
                {getFieldDecorator('colNums',{rules: [{ required: true,message:'列数不能为空'}],initialValue: formVals&&formVals.colNums||''})(
                  <InputNumber min={1} max={10} style={{ width: '100%' }} placeholder="1-10" />)}
              </FormItem>

              <FormItem {...formItemLayout} label="底图宽度：">
                {getFieldDecorator('picWidth',{initialValue: formVals&&formVals.picWidth||''})(
                  <InputNumber min={0} style={{ width: '100%' }} step={1} placeholder="0" />)}
              </FormItem>

              <FormItem {...formItemLayout} label="底图高度：">
                {getFieldDecorator('picHeight',{initialValue: formVals&&formVals.picHeight||''})(
                  <InputNumber min={0} style={{ width: '100%' }} step={1} placeholder="0" />)}
              </FormItem>

              <FormItem {...formItemLayout} label="水印内容：">
                {getFieldDecorator('waterContent', {
                  rules: [{ required: true,message:'请选择水印内容'},{
                    validator: this.handleValidator}],initialValue: formVals&&formVals.waterContent.split(',')||''})
                  (<Select placeholder="请选择" mode="multiple">
                  <Option value="0">用户名</Option>
                  <Option value="1">日期</Option>
                  <Option value="2">MAC地址</Option>
                  <Option value="3">IP地址</Option>
                </Select>)}
              </FormItem>
              <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
                <Button type="primary" onClick={() => this.preview()} style={{marginRight: '20px'}}>预览</Button>
                <Button type="primary" htmlType="submit" loading={submitting}>提交</Button>
              </FormItem>
            </Form>
            </Card>
          </Col>
        </Row>
      </Card>
    );
  }
}
export default screenForm;
